<template>
    <!-- 角色管理 -->
    <div class="role-manage">
        <div class="search-container">
            <el-form
                ref="ruleFormRef"
                :model="queryParams.entity"
                label-width="80"
                inline
            >
                <el-form-item label="关键字" prop="roleName">
                    <el-input
                        v-model="queryParams.entity.roleName"
                        maxlength="60"
                        placeholder="角色名称"
                        clearable
                        @keyup.enter="handleQuery"
                    />
                </el-form-item>
                <el-form-item label="状态" prop="enable">
                    <el-select
                        v-model="queryParams.entity.enable"
                        placeholder="全部"
                        style="width: 100px"
                        clearable
                    >
                        <el-option
                            v-for="(value, key, index) in STATUS_TYPE"
                            :value="key"
                            :label="value"
                            :key="index"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button
                        type="primary"
                        icon="Search"
                        @click="handleQuery"
                    >
                        搜索
                    </el-button>
                    <el-button icon="Refresh" @click="handleResetQuery">
                        重置
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-card shadow="never" class="table-container">
            <template #header>
                <el-button
                    type="success"
                    icon="Plus"
                    @click="handleOpenUserDialog({})"
                >
                    新增
                </el-button>
            </template>

            <el-table
                v-loading="loading"
                :data="tableData"
                highlight-current-row
                border
            >
                <el-table-column
                    v-for="(item, index) in columnData"
                    :key="index"
                    :prop="item.prop"
                    :label="item.label"
                    min-width="120"
                    :width="item.width || ''"
                    :fixed="item.fixed || false"
                    show-overflow-tooltip
                    :resizable="false"
                >
                    <template #default="{ row }">
                        <span v-if="['enable'].includes(item.prop)">
                            <el-tag
                                :type="
                                    [1].includes(row[item.prop])
                                        ? 'primary'
                                        : 'warning'
                                "
                                >{{ STATUS_TYPE[row[item.prop]] }}</el-tag
                            >
                        </span>
                        <span v-else>{{ row[item.prop] }}</span>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="300">
                    <template #default="scope">
                        <el-button
                            type="primary"
                            icon="Operation"
                            link
                            @click="handleOpenPointDrawer(scope.row)"
                        >
                            授权
                        </el-button>
                        <el-button
                            type="primary"
                            icon="Operation"
                            link
                            @click="handleOpenPermDrawer(scope.row)"
                        >
                            分配菜单
                        </el-button>
                        <el-button
                            type="primary"
                            icon="Edit"
                            link
                            @click="handleOpenUserDialog(scope.row)"
                        >
                            编辑
                        </el-button>
                        <el-button
                            type="danger"
                            icon="Delete"
                            link
                            @click="handleDelete(scope.row)"
                        >
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <Pagination
                v-if="total > 0"
                v-model:total="total"
                v-model:page="queryParams.pageNo"
                v-model:limit="queryParams.pageSize"
                @pagination="handleQuery"
            />
        </el-card>
        <EditDialog
            :roleParams="roleParams"
            @close="handleCloseUserDialog"
        ></EditDialog>
        <PermDrawer
            :permParams="permParams"
            @close="handleCloseUPermDrawer"
        ></PermDrawer>
        <!--      权限点-->
        <PermPoint :permPoint="permPoint" @close="handleCloseUPointDrawer">
        </PermPoint>
    </div>
</template>

<script setup>
defineOptions({ name: 'RoleManage' })
import { onMounted, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import Pagination from '@/components/Pagination.vue'
import EditDialog from './EditDialog.vue'
import PermDrawer from './PermDrawer.vue'
// 权限点
import PermPoint from './permpoint.vue'

import { getRolePage, deleteRole } from '@views/roleManage/api/roleManage'
import { STATUS_TYPE } from '@constants/dictionary'

const loading = ref(false)
const queryParams = reactive({
    entity: { roleName: '', enable: '' },
    pageNo: 1,
    pageSize: 10
})
const total = ref(0)
const columnData = ref([
    {
        label: '角色名称',
        prop: 'roleName',
        fixed: 'left'
    },
    {
        label: '角色编码',
        prop: 'roleCode'
    },
    {
        label: '菜单',
        prop: 'menuName'
    },
    {
        label: '状态',
        prop: 'enable',
        width: 100
    },
    {
        label: '描述',
        prop: 'details'
    },
    {
        label: '创建时间',
        prop: 'createTime',
        width: 180
    }
])
const tableData = ref()
const ruleFormRef = ref(null)
const roleParams = reactive({ visible: false })
const permParams = reactive({ visible: false })
const permPoint = reactive({ visible: false })

// 获取数据
const handleQuery = async () => {
    loading.value = true
    const res = await getRolePage(queryParams)
    loading.value = false
    if (res?.code === 200) {
        tableData.value = res.data.records || []
        total.value = res.total || 0
    }
}

// 重置表单
const handleResetQuery = () => {
    ruleFormRef.value.resetFields()
    queryParams.pageNo = 1
    handleQuery()
}
// 打开配置弹窗
const handleOpenPermDrawer = (row) => {
    permParams.row = row
    permParams.visible = true
}
// 关闭配置弹窗
const handleCloseUPermDrawer = (type) => {
    console.log('关闭')
    permParams.visible = false
    if (type) handleQuery()
}
// 打开配置权限点弹窗
const handleOpenPointDrawer = (row) => {
  permPoint.row = row
  permPoint.visible = true
}
// 关闭权限点弹框
const handleCloseUPointDrawer = (type) => {
  console.log('关闭')
  permPoint.visible = false
  if (type) handleQuery()
}
// 打开角色弹窗
const handleOpenUserDialog = (row) => {
    roleParams.row = row
    roleParams.visible = true
}
// 关闭角色弹窗
const handleCloseUserDialog = (type) => {
    console.log('关闭')
    roleParams.visible = false
    if (type) handleQuery()
}

// 删除
const handleDelete = (row) => {
    ElMessageBox.confirm('确认删除的数据项', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    })
        .then(async () => {
            let res = await deleteRole({ ids: row.roleId })
            if (res?.code === 200) {
                ElMessage.success('删除成功')
                handleQuery()
            }
        })
        .catch(() => {})
}

// 初始化
onMounted(() => {
    handleQuery()
})
</script>

<style scoped lang="scss"></style>
